<template>
    <div class="alarm-container">
        <div class="alarm-header">
            <span class="header-title">报警信息</span>
            <span class="header-count">{{ totalAlarmCount }} 条未处理</span>
        </div>

        <div class="scroll-wrapper">
            <div class="scroll-content" ref="scrollContent">
                <!-- 滚动内容：包含所有数据（而非仅可见数据） -->
                <div class="alarm-list" ref="singleList">
                    <div class="alarm-item" v-for="(item, index) in allAlarms" :key="index">
                        <div class="level-dot" :class="item.level"></div>
                        <div class="item-info">
                            <div class="item-desc">{{ item.content }}</div>
                            <div class="item-time">{{ item.alarmTime }}</div>
                        </div>
                    </div>
                </div>

                <!-- 复制一份完整数据用于无缝衔接 -->
                <div class="alarm-list" v-if="needScroll">
                    <div class="alarm-item" v-for="(item, index) in allAlarms" :key="index + allAlarms.length">
                        <div class="level-dot" :class="item.level"></div>
                        <div class="item-info">
                            <div class="item-desc">{{ item.content }}</div>
                            <div class="item-time">{{ item.alarmTime }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';

const props = defineProps({
    alarms: {
        type: Array,
        default: () => []
    },
    maxVisible: { type: Number, default: 10 } // 容器内最多显示10条（但滚动包含所有数据）
});

// 所有报警数据（包含第11条及以上）
const allAlarms = computed(() => {
    return Array.isArray(props.alarms) ? props.alarms : [];
});

// 总条数
const totalAlarmCount = computed(() => allAlarms.value.length);

// 是否需要滚动（总条数 > 容器可显示的最大条数）
const needScroll = computed(() => {
    return totalAlarmCount.value > props.maxVisible;
});

// 滚动相关
const scrollContent = ref(null);
const singleList = ref(null);
let scrollTimer = null;
let scrollPosition = 0; // 当前滚动位置
let singleListHeight = 0; // 单份列表高度
let isScrolling = false;
onMounted(() => {
    initScroll();
});

onUnmounted(() => {
    stopScroll();
});

// 监听报警变化，处理增减场景
watch(() => props.alarms, (newVal, oldVal) => {

    //console.log('报警变化')
    if (newVal.length == oldVal.length) {
        return
    }

    nextTick(() => {
        const prevHeight = singleListHeight;
        singleListHeight = singleList.value?.clientHeight || 0;

        // 1. 处理报警减少的情况
        if (newVal.length < oldVal.length) {
            if (!needScroll.value) {
                scrollPosition = 0; // 不需要滚动时重置到顶部
                stopScroll();
            } else if (prevHeight && singleListHeight && scrollPosition > singleListHeight) {
                scrollPosition = singleListHeight - 1; // 确保不超过新高度
            }
        }
        // 2. 处理报警增加的情况
        else if (newVal.length > oldVal.length) {
            if (scrollPosition === 0) {
                scrollPosition = 0; // 保持在顶部
            } else if (prevHeight && singleListHeight) {
                scrollPosition = (scrollPosition / prevHeight) * singleListHeight; // 按比例调整
            }
        }


        updateScrollPosition();

        // 启动/停止滚动
        if (needScroll.value && !isScrolling) startScroll();
        if (!needScroll.value && isScrolling) stopScroll();
    });
});
const initScroll = () => {
    nextTick(() => {
        singleListHeight = singleList.value?.clientHeight || 0;
        updateScrollPosition();
        if (needScroll.value) startScroll();
    });
};

const updateScrollPosition = () => {
    if (scrollContent.value) {
        scrollContent.value.style.transform = `translateY(-${Math.floor(scrollPosition)}px)`;
    }
};


const startScroll = () => {
    if (!scrollContent.value || singleListHeight <= 0 || isScrolling) return;

    isScrolling = true;
    scrollTimer = setInterval(() => {
        scrollPosition += 1;
        if (scrollPosition >= singleListHeight) scrollPosition = 0;
        updateScrollPosition();
    }, 20);
};

const stopScroll = () => {
    if (scrollTimer) {
        clearInterval(scrollTimer);
        scrollTimer = null;
        isScrolling = false;
    }
};



</script>

<style scoped>
/* 样式与之前保持一致，确保容器高度固定 */
.alarm-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 1vw;
    background-color: #1e1a20;
    border: 0.2vw solid #9e2a2b;
    border-radius: 0.8vw;
    animation: pulse 2s infinite;
}

.alarm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1vw;
    padding-bottom: 0.5vw;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-title {
   font-size: clamp(16px,1.1vw,18px);
    color: #ff6b6b;
    font-weight: 600;
}

.header-count {
    font-size: 0.8vw;
    background-color: #9e2a2b;
    padding: 0.2vw 0.6vw;
    border-radius: 1vw;
    color: #fff;
}

.scroll-wrapper {
    width: 100%;
    height: calc(100% - 4vw);
    /* 固定高度，仅显示maxVisible条 */
    overflow: hidden;
    position: relative;
}

.scroll-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0s linear;
    will-change: transform;
}

.alarm-list {
    width: 100%;
}

.alarm-item {
    display: flex;
    align-items: flex-start;
    padding: 0.8vw 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.level-dot {
    width: 0.6vw;
    height: 0.6vw;
    border-radius: 50%;
    margin: 0.4vw 0.8vw 0 0;
}

.level-dot.critical {
    background-color: #ff6b6b;
    box-shadow: 0 0 0.5vw rgba(255, 107, 107, 0.8);
}

.level-dot.warning {
    background-color: #ffcc00;
    box-shadow: 0 0 0.5vw rgba(255, 204, 0, 0.8);
}

.level-dot.info {
    background-color: #4da6ff;
    box-shadow: 0 0 0.5vw rgba(77, 166, 255, 0.8);
}

.item-info {
    flex: 1;
}

.item-desc {
    font-size: 1vw;
    color: #fff;
    margin-bottom: 0.3vw;
}

.item-time {
    font-size: 0.8vw;
    color: #8da5c8;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0.5vw rgba(158, 42, 43, 0.6);
    }

    50% {
        box-shadow: 0 0 1.5vw rgba(230, 57, 70, 0.8);
    }

    100% {
        box-shadow: 0 0 0.5vw rgba(158, 42, 43, 0.6);
    }
}
</style>